<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能监控系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .video-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
        }
        .video-feed {
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .alert-container {
            max-height: 300px;
            overflow-y: auto;
        }
        .alert-item {
            padding: 10px;
            margin: 5px 0;
            border-radius: 4px;
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body class="bg-light">
    <div class="container py-4">
        <h1 class="text-center mb-4">智能监控系统</h1>
        
        <div class="row">
            <div class="col-md-8">
                <div class="video-container mb-4">
                    <img src="{{ url_for('video_feed') }}" class="video-feed" alt="视频流">
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header bg-danger text-white">
                        <h5 class="card-title mb-0">报警信息</h5>
                    </div>
                    <div class="card-body alert-container" id="alertContainer">
                        <!-- 报警信息将在这里动态显示 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <script>
        function updateAlerts() {
            fetch('/alerts')
                .then(response => response.json())
                .then(alerts => {
                    const container = document.getElementById('alertContainer');
                    container.innerHTML = '';
                    alerts.reverse().forEach(alert => {
                        const alertDiv = document.createElement('div');
                        alertDiv.className = 'alert-item';
                        alertDiv.textContent = alert;
                        container.appendChild(alertDiv);
                    });
                });
        }

        // 定期更新报警信息
        setInterval(updateAlerts, 5000);
        updateAlerts(); // 初始加载
    </script>
</body>
</html>